<template>
	<view class="content-box">
		<word-review v-if="inSetup===1" :wordlist="stepData" @next="handelTestNext" :mode="0"></word-review>
		<view class="detail" v-else-if="inSetup===2"> 
			<single-selection @next="getNextflag" :effect="true" :pause="true" :current="current" :type="type"></single-selection>
		</view>
		<lv-result v-else @next="handelNext"></lv-result>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, provide } from 'vue';
	import { IWord, TestTemplates, useStudyStore } from '@/store/study';
	import { isString, ktlapi, randomArray } from '@/utils';
	import { useTest } from '@/common/hooks';
	import WordReview from '@/pages-study/components/word-review/word-review.vue';
	import LvResult from '@/pages-study/components/lv-result/lv-result.vue';
	import SingleSelection from '@/pages-study/components/single-selection/single-selection.vue';
	
	/** 步骤：复习上一节课的词汇 */
	defineOptions({
		name: 'step-prev-lesson',
		inheritAttrs: false,
		options: {
			virtualHost: true
		}
	});
	// 声明组件基本要素
	const emit = defineEmits(['module-event']);
	// hooks 初始化
	const studyStore = useStudyStore();
	const testUtil = useTest();
	// 声明用户变量
	const current = ref<IWord>(null);
	const type = ref(null);
	const inSetup = ref(1);
	const stepData = ref([]);
	// 惩罚机制
	const CFCount = 0;
	
	const { SPELL, SPELL_SIMPLE, YYH, HYY, TX } = TestTemplates;
	provide('doubleVisible', false);
	function handelTestNext(){
		inSetup.value = 2;
		const result = testUtil.findCurrent(stepData.value, false);
		// console.log('result', result)
		if (result.found) {
			type.value = result.attrs.type;
			current.value = result.attrs.current;
		} else {
			inSetup.value = 3
		}
	}
	
	function getNextflag(_item: IWord, isright: boolean, _isJump: boolean){ 
		for (let i = 0; i < stepData.value.length; i++) {
			const item = stepData.value[i];
			if (current.value.WordId === item.WordId) {
				for(let j = 0; j < item.UseTemplates.length; j++){
					if(testUtil.getTemplateType(item.UseTemplates[j]) == testUtil.getTemplateType(type.value)){ 
						item.UseTemplates[j]["TotalCount"] -= 1;
						if(!isright){ 
							item.UseTemplates[j]["ErrorCount"] += 1;
							item.UseTemplates[j]["TotalCount"] += CFCount;   
							if(item.UseTemplates[j]["TotalCount"] > 3){
								item.UseTemplates[j]["TotalCount"] = 3
							}
						} 
						break;
					}
				}
				break;
			}
		}
		
		handelTestNext();
	}
	
	const handelNext = () => {
		ktlapi({
			action: 'Cus_LostLessonPreView',
			data: {
				LessonUUID: current.value.LessonUUID
			}
		}).then(() => {
			emit('module-event', { action: 'next'});
		})
	}
	
	onMounted(()=>{  
		var useTemplates = [HYY, YYH, TX];
		let needRemeberWords = JSON.parse(JSON.stringify(studyStore.wordGroup)); 
		for(var i=0;i<needRemeberWords.length;i++){
			needRemeberWords[i].NeedRemeber = true;
			if(isString(needRemeberWords[i].SentenceSnapshot)){
				needRemeberWords[i].SentenceSnapshot = JSON.parse(needRemeberWords[i].SentenceSnapshot);
			}
			
			const randomNumber = randomArray([0,1,2,3,4,5,6,7,8])[0];
			
			const tempIndex = Math.ceil((randomNumber+1)/3) - 1;
			const randomTemp = [useTemplates[tempIndex]];
			needRemeberWords[i].UseTemplates = testUtil.initUseTemplateConfig(randomTemp, { TotalCount: 1, ErrorCount: 0 })
		}
		
		// 添加混淆项
		testUtil.fillTestData(needRemeberWords, [...studyStore.wordGroup, ...studyStore.shuffleWords]);
		// testUtil.fillTestData(needRemeberWords, studyStore.shuffleWords);
		stepData.value = needRemeberWords;
		
		// console.log('stepData.value', stepData.value)
	})
	
	
	
</script>
<style lang="scss" scoped>
	.content-box{
		--font-color: #332c2b;
		display: flex;
		flex-flow: column;
		flex: 1;
		margin: 0 30rpx;
		
		.option-box {
			display: flex;
			height: 100rpx;
			align-items: center;
		
			.left {
				flex: 1;
				display: flex;
				align-items: center;
		
				.read-text {
					color: #757475;
					margin-right: 20rpx;
					font-size: 36rpx;
				}
			}
		
			.process {
				padding: 10rpx 14rpx;
				color: #f55f22;
				background-color: #fed7c6;
				border-radius: 30rpx;
				min-width: 150rpx;
				text-align: center;
			}
		}
		
		.detail {
			flex: 1;
		}
	}
	
	.next-text{
		font-size: var(--text-18);
		font-weight: bold;
		display: flex;
	}
	
	/* 针对 1280px 分辨率 */
	@media(min-width:1200px) {
		.content-box {
			width: 2400rpx;
			margin: 0 auto !important;
		}
		
		.process{
			min-width: 238rpx;
		}
	
		.detail {
			
		}
	}
</style>